<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Audio/Video Device Selection</title>
</head>
<body>
  <h1>WebRTC Audio/Video Device Selection</h1>

  <label for="audioInputSelect">Audio input devices: </label>
  <select id="audioInputSelect"></select>

  <label for="videoInputSelect">Video input devices: </label>
  <select id="videoInputSelect"></select>

  <script>
    // 获取音频和视频设备列表
    navigator.mediaDevices.enumerateDevices()
      .then(devices => {
        devices.forEach(device => {
          if (device.kind === 'audioinput') {
            // 将音频设备添加到选择标签中
            const option = document.createElement('option');
            option.value = device.deviceId;
            option.text = device.label || 'Microphone ' + (audioInputSelect.length + 1);
            audioInputSelect.appendChild(option);
          } else if (device.kind === 'videoinput') {
            // 将视频设备添加到选择标签中
            const option = document.createElement('option');
            option.value = device.deviceId;
            option.text = device.label || 'Camera ' + (videoInputSelect.length + 1);
            videoInputSelect.appendChild(option);
          }
        });
      })
      .catch(err => {
        console.error('Error getting media devices: ', err);
      });
  </script>
</body>
</html>
